{extend name="public/common"}

{block name="style"}
<title>在线审批</title>
<link rel="stylesheet" href="/home/css/approval/index.css?v={$Think.config.version}">
{/block}

{block name="body"}
<div id="app" v-cloak>
    <div class="head">
        <div v-for="item in navbar" :class="selected == item.key ? 'active' : ''" @click="choose(item.key)">{{item.name}}</div>
    </div>
    <div class="neck" v-if="selected > 1">
        <div class="selected" @click="popupVisible = true">
            <p>{{statusList[Number(query[selected].query_status)+1]}}</p>
            <i class="fa fa-angle-down"></i>
        </div>
<!--        <div class="search">-->
<!--            <img src="/home/images/common/search-grey.png" class="icon-search"/>-->
<!--            <input type="search" v-model="search" placeholder="搜索" @search="getSearch" autocomplete="off"/>-->
<!--            <img src="/home/images/common/delete.png" class="icon-delete" @click="delSearch"/>-->
<!--        </div>-->
        <div class="flex">
            <div class="time-box" @click="chooseTime">
                <div class="time">{{query[selected].query_time | timeToString('ym')}}</div>
                <i class="fa fa-angle-down"></i>
            </div>
            <div class="screen-box" @click="toggleType">
                <div class="screen">{{typeList[query[selected].query_type]}}</div>
                <i class="fa fa-angle-down"></i>
            </div>
        </div>
        <mt-datetime-picker
                v-model="time"
                type="date"
                ref="timePicker"
                cancelText="全部"
                year-format="{value} 年"
                month-format="{value} 月"
                @confirm="timeConfirm"
                class="timePicker"
                @cancel="cancelHandle"
        >
        </mt-datetime-picker>
        <mt-popup
                class="type-popup"
                v-model="popupVisible"
                popup-transition="popup-fade">
            <div @click="chooseStatus(index-1)" v-for="(item,index) in statusList" v-if="selected == 2 || (selected == 3 && index < 4)"><span>{{item}}</span><i class="fa fa-check" v-if="query[selected].query_status == index-1"></i></div>
        </mt-popup>
        <mt-popup  position="bottom" v-model="typePopupVisible" class="screen-popup">
            <div class="picker-toolbar">
                <span class="mint-datetime-action mint-datetime-cancel" @click="typeCancelHandle">取消</span>
                <span class="mint-datetime-action mint-datetime-confirm" @click="typeConfirmHandle">确定</span>
            </div>
            <div class="type-list">
                <div class="type-list-item" :class="{active: queryType == index}" v-for="(item,index) in typeList" @click="chooseType(index)">{{item}}<i class="fa fa-check" v-if="queryType == index"></i></div>
            </div>
        </mt-popup>
    </div>
    <div class="body" :style="{'margin-top': selected > 1 ? '2.84rem' : '1rem'}">
        <div class="add-approval" v-show="selected == 1">
            <a href="{:Url('Approval/dayoff')}">
                <div>
                    <img src="/home/images/approval/approval-1.png" />
                    <p>请假审批</p>
                    <i class="fa fa-angle-right"></i>
                </div>
            </a>
            <a href="{:Url('Approval/officialseal')}">
                <div>
                    <img src="/home/images/approval/approval-2.png" />
                    <p>公章使用审批</p>
                    <i class="fa fa-angle-right"></i>
                </div>
            </a>
            <a href="{:Url('Approval/purchase')}" v-if="permission == 3 || userId == '13819538776'">
                <div>
                    <img src="/home/images/approval/approval-3.png" />
                    <p>物资采购审批（内购）</p>
                    <i class="fa fa-angle-right"></i>
                </div>
            </a>
            <a href="{:Url('Approval/department')}" v-if="permission == 3">
                <div>
                    <img src="/home/images/approval/approval-4.png" />
                    <p>部门联系单</p>
                    <i class="fa fa-angle-right"></i>
                </div>
            </a>
            <a href="{:Url('Approval/overtime')}">
                <div>
                    <img src="/home/images/approval/approval-5.png" />
                    <p>加班申请审批</p>
                    <i class="fa fa-angle-right"></i>
                </div>
            </a>
        </div>
        <div v-show="selected > 1" infinite-scroll-immediate-check="false" v-infinite-scroll="loadMore"
             infinite-scroll-disabled="loading"
             infinite-scroll-distance="10">
            <div class="my-application" v-show="selected == 2">
                <ul>
                    <li v-for="item in list.apply" @click="toDetail(item.id,item.class)">
                        <div>
                            <div class="type">
                                <p>{{item.title || item.back_title}}</p>
                                <span class="during" v-if="item.status == 0">待审批</span>
                                <span class="pass" v-else-if="item.status == 1">已通过</span>
                                <span class="rejected" v-else-if="item.status == 2">不同意</span>
                                <span class="during" v-else-if="item.status == 3">进行中</span>
                            </div>
                            <span class="time">{{item.apply_time | timeToString('ymd')}}</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="my-application " v-show="selected == 3">
                <ul>
                    <li v-for="item in list.approval" @click="toDetail(item.pid,item.class)">
                        <div>
                            <div class="type">
                                <p>{{item.title || item.back_title}}</p>
                                <span class="during" v-if="item.status == 0">待审批</span>
                                <span class="pass" v-else-if="item.status == 1">已通过</span>
                                <span class="rejected" v-else-if="item.status == 2">不同意</span>
                                <span class="during" v-else-if="item.status == 3">进行中</span>
                            </div>
                            <span class="user">{{item.apply_user}}</span>
                            <span class="time">{{item.apply_time | timeToString('ymd')}}</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="loading-more" v-if="len >= 10">
                <div v-if="loadOver && len >= 10" class="load" style="font-size:0.3rem">{{texts}}</div>
                <div v-else v-show="loading">
                    <mt-spinner :type="3" color="#999"></mt-spinner>
                </div>
            </div>
            <div class="empty" v-if="len == 0 && (selected == 2 || selected == 3)">
                <img class="empty-img" src="/home/images/common/empty.png" alt="">
                <p class="empty-title">暂无内容，敬请期待</p>
                <p class="empty-text">to be continued...</p>
            </div>
        </div>

    </div>
</div>
{/block}

{block name="script"}
<script>
    console.log({$list})
    console.log({$queryTypeList})
    var vw = new Vue({
        el: "#app",
        data: {
            selected: 1,
            texts: '没有更多了~',
            loadOver: true,
            loading: false,
            len: {$list}.apply.length,
            popupVisible: false,
            navbar: [{name:'新建审批',key:1},{name:'我的申请',key:2},{name:'我的审批',key:3}],
            list: {$list},
            permission: {$list}.permission,
            userId: "{$userId}",
            search: '',
            time: new Date(),
            statusList: ['全部','待审批','已通过','不同意','进行中'],
            typeList: {$queryTypeList},
            queryType: '0',
            typePopupVisible: false,
            query: {
                2: {
                    query_time: '',
                    query_status: '-1',
                    query_type: '0',
                },
                3: {
                    query_time: '',
                    query_status: '-1',
                    query_type: '0',
                }
            }
        },
        created() {
            this.pushHistory();
            this.selected = window.sessionStorage.getItem('approval_type')?window.sessionStorage.getItem('approval_type'):1;
            if(this.permission == 4) {
                this.navbar = [{name:'新建审批',key:1},{name:'我的申请',key:2}]
            } else {
                if(this.selected == 3) {
                    this.len = this.list.approval.length;
                } else {
                    this.len = this.list.apply.length;
                }
            }

            window.sessionStorage.removeItem('approval_type');
        },
        methods: {
            pushHistory() {
                window.addEventListener("popstate", function (e) {
                    self.location.reload();
                }, false);
                var state = {
                    title: "",
                    url: "#"
                };
                window.history.replaceState(state, "", "#");
            },
            choose(key) {
                this.selected = key;
                if (key == 2) {
                    this.len = this.list.apply.length;
                } else if (key == 3) {
                    this.len = this.list.approval.length;
                }
                this.queryType = (this.query[this.selected] || {}).query_type;
                this.loadOver = true;
                this.loading = false;
            },
            toDetail(id,type) {
                window.location.href = '/home/approval/detail/class/'+type+'/id/'+id+'.html';
                window.sessionStorage.setItem('approval_type',this.selected);
            },
            chooseStatus(i) {
                this.query[this.selected].query_status = i;
                this.popupVisible = false;
                this.updateList();
            },
            updateList() {
                var _this = this;
                _this.$indicator.open({
                    text: '',
                    spinnerType: 'triple-bounce'
                });
                _this.$http.post('{:Url("Approval/index")}', {
                    'type': _this.selected,
                    'query_time': _this.query[this.selected].query_time,
                    'query_type': _this.query[this.selected].query_type,
                    'status': _this.query[this.selected].query_status == -1 ? '' : _this.query[this.selected].query_status
                }, {emulateJSON: true}).then(function (res) {
                    var data = res.data;
                    _this.$indicator.close();
                    if (data.data.length == 10) {
                        _this.loading = false;
                    } else {
                        _this.loadOver = true;
                    }
                    if(_this.selected == 3) {
                        _this.list.approval = data.data || [];
                        _this.len = _this.list.approval.length;
                    } else {
                        _this.list.apply = data.data || [];
                        _this.len = _this.list.apply.length;
                    }
                }, function () {
                    _this.$indicator.close();
                    _this.$toast({message: '加载失败，请重试', duration: 1500});
                    _this.loadOver = true;
                })
            },
            loadMore() {
                var _this = this;
                if (_this.len < 10) {
                    return false
                }
                _this.loading = true;
                _this.loadOver = false;
                _this.$http.post('{:Url("Approval/index")}', {
                    'length': _this.len,
                    'type': _this.selected,
                    'query_time': _this.query[this.selected].query_time,
                    'query_type': _this.query[this.selected].query_type,
                    'status': _this.query[this.selected].query_status == -1 ? '' : _this.query[this.selected].query_status
                }, {emulateJSON: true}).then(function (res) {
                    var data = res.data;
                    console.log(data)
                    if (res.body.code == 1) {
                        if (data.data.length == 10) {
                            _this.loading = false;
                        } else {
                            _this.loadOver = true;
                        }
                        for (var i in data.data) {
                            if(_this.selected == 3) {
                                _this.list.approval.push(data.data[i])
                            } else {
                                _this.list.apply.push(data.data[i])
                            }
                        }
                        if(_this.selected == 3) {
                            _this.len = _this.list.approval.length;
                        } else {
                            _this.len = _this.list.apply.length;
                        }
                    } else {
                        _this.loadOver = true;
                    }
                }, function () {
                    _this.$toast({message: '加载失败，请重试', duration: 1500});
                    _this.loadOver = true;
                })
            },
            toggleType(){
                this.typePopupVisible = !this.typePopupVisible;
            },
            typeConfirmHandle(val){
                var _this = this;
                if(_this.query[this.selected].query_type != _this.queryType){
                    _this.query[this.selected].query_type = _this.queryType;
                    _this.updateList();
                }
                _this.toggleType();
            },
            typeCancelHandle() {
                this.toggleType();
                this.queryType = this.query[this.selected].query_type;
            },
            chooseType(index) {
                this.queryType = index;
            },
            // getSearch() {
            //     var _this = this;
            //     _this.$indicator.open({
            //         text: '正在搜索中',
            //         spinnerType: 'triple-bounce'
            //     });
            //     _this.$http.post('{:Url("Resource/search")}',{name:this.search},{emulateJSON:true}).then(function (res) {
            //         var data = res.body;
            //         console.log(data)
            //         _this.$indicator.close();
            //         if(data.code == 1){
            //             _this.searchList = data.data;
            //             _this.showSearch = true
            //         }else{
            //             _this.$toast({
            //                 message: "未搜索到相应内容",
            //                 duration: 1500
            //             });
            //         }
            //     }, function (res) {
            //         _this.$indicator.close();
            //         _this.$toast({
            //             message: "搜索失败，请重试！",
            //             duration: 1500
            //         });
            //     });
            // },
            // delSearch() {
            //     this.searchList = [];
            //     this.search = '';
            // },
            chooseTime() {
                this.$refs.timePicker.open();
            },
            timeConfirm(val) {
                this.time = val;
                this.query[this.selected].query_time = val.getTime() / 1000;
                this.updateList();
            },
            cancelHandle() {
                this.time = new Date();
                this.query[this.selected].query_time = '';
                this.updateList();
            }
        }
    })
</script>
{/block}
